<!DOCTYPE html>
<head>
    <title>Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=0.62, user-scalable=1, minimum-scale=0.62, maximum-scale=0.62"> -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel='stylesheet' href='./css/bootstrap/bootstrap.min.css' type='text/css'/>
    <!--Morris Chart CSS -->
    <link rel="stylesheet" href="css/morris.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/main.css">
    <!--jquery-->
    <script type="text/javascript" src='./js/lib/jquery/jquery-1.10.2.min.js'></script>
    <script type="text/javascript" src='./js/lib/underscore/underscore.min.js'></script>    
    <!--pie Char js-->
    <script type="text/javascript" src="./js/lib/chars/Chart.js"></script>

    <!--Morris Chart JS-->
    <script type="text/javascript" src="./js/lib/chars/morris.js"></script>
    <script type="text/javascript" src="./js/lib/chars/raphael-min.js"></script>
    <script type="text/javascript" src='./js/lib/fastclick.js'></script>
    <style>
		@font-face{
		   font-family:'Trajan Pro';
		   src:url('file:///android_asset/fonts/TrajanProBold.otf');
		}   
        body {
          background-color: #f1f2f7;
        }
		.headbar {
			height: 60px;
			background-color: #050505;
			color: #fff;
			font-family: "Trajan Pro";
			font-size: 24px;
			position: fixed;
			left:0px;
			right:0px;
			top:0px;
			z-index:100;
		}
		.headbar .title {
		  line-height:60px;
		}    
      .container {
        width:970px!important;
      }
      .sqr {
        width:24px;
        height:20px;
      }
      .blk_0 {
        background-color:#d9edf7;
      }
      .blk_1 {
        background-color:#f2dede;
      }      
      .blk_2 {
        background-color:#dff0d8;
      } 
      .blk_3 {
        background-color:#fcf8e3;
      }
      .blk_4 {
        background-color:rgb(239, 179, 230);
      }            
    </style>
</head>
<body>
<header class="row headbar fixed-top">
       <div class="col-md-2">
           <div id="backBtn"></div>
       </div>
       <div class="col-md-8">
           <div class="text-center title">Dashboard</div>
       </div>
       <div class="col-md-2">
           <div id="refBut" class="pull-right"></div>
       </div>
</header>

<div class="container" style="width:100%;margin-top:80px;">
<!--itembox daily start-->
<div class="row" style="margin:0 auto;">
    <div class="col-md-3 ">
        <div class="mini-stat clearfix">
            <span class="mini-stat-icon orange"><i class="fa fa-gavel"></i></span>
            <div class="mini-stat-info ">
                <span class="subtotal"></span>
                Subtotal
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="mini-stat clearfix">
            <span class="mini-stat-icon tar"><i class="fa fa-tag"></i></span>

            <div class="mini-stat-info ">
                <span class="totaltax"></span>
                Total Tax
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="mini-stat clearfix">
            <span class="mini-stat-icon pink"><i class="fa fa-money"></i></span>

            <div class="mini-stat-info ">
                <span class="totaldiscount"></span>
                Total Discount
            </div>
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="mini-stat clearfix">
            <span class="mini-stat-icon green"><i class="fa fa-eye"></i></span>

            <div class="mini-stat-info">
                <span class="totalamount"></span>
                Total Amount
            </div>
        </div>
    </div>
</div>
<!--itembox daily end-->
<div class="row" style="margin:0 auto;">
<div class="col-md-8">
    <!--Sales in recent 3 operational days start-->
    <section class="panel">
        <div class="panel-body">
            <div class="row">
                <div id="graph-area-line" class="main-chart">
                </div>
            </div>
        </div>
    </section>
    <!--Sales in recent 3 operational days end-->
    <!--TOP Sales by Categories start-->
    <section class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <canvas id="ctychart" height="200" width="200" style="width: 200px; height: 200px;"></canvas>
                </div>
                <div class="col-md-6" style="margin-top: 20px;">
					<table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Category</th>
                            <th>QTY</th>
                        </tr>
                        </thead>
                        <tbody id="ctysales">
                        </tbody>
					</table>
                </div>
            </div>
        </div>
    </section>
    <!--TOP Sales by Categories end-->
    <!--TOP Sales by Items sold start-->
    <section class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <canvas id="itemchart" height="200" width="200" style="width: 200px; height: 200px;"></canvas>
                </div>
                <div class="col-md-6" style="margin-top: 20px;">
					<table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Item</th>
                            <th>QTY</th>
                        </tr>
                        </thead>
                        <tbody id="itemsale">

                        </tbody>
					</table>
                </div>
            </div>
        </div>
    </section>
    <!--TOP Sales by Items sold end-->
</div>
<div class="col-md-4">
    <!--Daily Sales start-->
    <div class="row">
        <div class="col-md-12">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <h4 class="widget-h">DAILY SETTLEMENT</h4>

                        <div class="bar-stats">
                            <ul class="progress-stat-bar clearfix" id="prsCheck">

                            </ul>
                            <ul class="bar-legend">
                                <li class=""><span class="bar-legend-pointer pink"></span> Cash</li>
                                <li class=""><span class="bar-legend-pointer green"></span> Cards</li>
                                <li class=""><span class="bar-legend-pointer yellow-b"></span> Others</li>
                            </ul>
                            <div class="daily-sales-info">
                                <span class="sales-count salesPrsCheck ">0 </span> <span
                                    class="sales-label">Total Checks</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!--Daily Sales start end-->
    <!--Daily Sales start-->
    <div class="row">
        <div class="col-md-12">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <h4 class="widget-h">SESSION SALES</h4>

                        <div class="bar-stats">
                            <ul class="progress-stat-bar clearfix" id="prsOrder">

                            </ul>
                            <ul class="bar-legend">
                                <li class=""><span class="bar-legend-pointer pink"></span>Breakfast</li>
                                <li class=""><span class="bar-legend-pointer green"></span>Lunch</li>
                                <li class=""><span class="bar-legend-pointer yellow-b"></span>Dinner</li>
                            </ul>
                            <div class="daily-sales-info">
                                <span class="sales-count salesPrsOrder">0 </span> <span
                                    class="sales-label">Total Orders</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!--Daily Sales start end-->
    <!-- Top sales by Employeed start-->
    <div class="row">
        <div class="col-md-12">
            <section class="panel">
                <div class="panel-body">    
                    <div class="row">
                        Top sales by Employeed
                    </div>
                   <div class="row"> 
						<table class="table">
	                        <thead>
	                        <tr>
	                            <th>#</th>
	                            <th>Waiter Name</th>
	                            <th>Sales</th>
	                        </tr>
	                        </thead>
	                        <tbody>
	                        </tbody>
						</table>
					</div>
                </div>
            </section>
        </div>
    </div>
    <!-- Top sales by Employeed end-->
</div>
</div>
</div>
<footer>footer</footer>

<script type="text/template" id="ctysales-board-template">
      <% _.each(ctylist, function(cty, index) { %> 
        <tr>
            <td><div class="sqr blk_<%=index %>"></div></td>
            <td><%=cty.name %></td>
            <td><%=cty.qty %></td>
        </tr>
      <% }); %>  
</script>

<script type="text/template" id="itemsales-board-template">
      <% _.each(itemlist, function(item, index) { %> 
        <tr>
            <td><div class="sqr blk_<%=index %>"></div></td>
            <td><%=item.name %></td>
            <td><%=item.qty %></td>
        </tr>
      <% }); %>  
</script>
<!--
<script type="text/javascript" src='./js/app/dummy_data.js'></script>
<script type="text/javascript" src='./js/app/android_dummy.js'></script>
-->
<script src="./js/app/dashboard.js"></script>
</body>
</html>
